<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>标签页插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.工具提示(鼠标悬停显示提示语)
		1)	data-toggle="tooltip"
		2) 	$('a').tooltip();
		3)	title="提示信息"
		//默认是淡入淡出的的动画效果

	2.属性
		1)	淡入淡出的动画效果
			data-animation="false"(默认true) 			//关闭fade动画效果

		2)	解析
			data-html="true" (默认为false) 				//会将标签对解析

		3)	提示框的位置
			data-placement="auto"(默认为top) 			//提示信息出现的位置(left/right/bottom/auto,其中auto可以组合,如auto top，会尽量在左边,否则就自动换个位置)

		4)	data-original-title="1234"(默认为空字符串)		//优先级低于title

		5)	触发方式
			data-trigger="click"(默认hover focus) 			//默认为悬停或获取到焦点时触发tooltip。

		6)	data-selector="true"(默认false) 				//可以选择绑定指定的选择器

				$('父级').tooltip({
		  			selector : '自定义属性名称'
		  		})

		*)	更改提示框的模板
			data-template
				默认:
				<div class="tooltip">
					<div class="tooltip-arrow"></div>
					<div class="tooltip-inner"></div>
				</div>

		7)	延迟
			声明式：data-delay="毫秒"
			脚本式：data-delay="{show:500, hide:200}" 		//在JS中写,如下

					$('a').tooltip({
			  			delay:{
			  				show : 1000,
			  				hide : 1000
			  			}
			  		})

			★★★javascript方式直接去掉前面的data-即可。包括animation、html、placement、selector、original-title、title、trigger、delay、container和templace等属性

		8) 	data-container						//当容器的限制导致提示框变形时，可以改写提示框原先的容器为更大的容器，如body

		*)	用其他对象来触发tooltip及销毁destroy
				$('a').tooltip({
					trigger : click
				})

				$('button').on('click',function () {
					$('a').tooltip('show');				显示
					$('a').tooltip('hide');				隐藏
					$('a').tooltip('toggle');			显示隐藏切换
					$('a').tooltip('destroy')			销毁提示信息
				})

		*)	$('a').tooltip('show.bs.tooltip', endFn) 	出现提示框之前触发	
			$('a').tooltip('shown.bs.tooltip', endFn) 	出现提示框之后触发
			$('a').tooltip('hide.bs.tooltip', endFn) 	关闭提示框之前触发
			$('a').tooltip('hidden.bs.tooltip', endFn) 	关闭提示框之后触发


 --> 		


	<!-- 工具提示 -->
	<a href="#"
		data-toggle="tooltip"
		title="<b>超文本标识语言</b>"
		data-animation="false"
		data-html="true"
		data-placement="auto top"
		data-original-title="1234"
		data-trigger="hover focus"
		data-delay="500"
	>html</a>

	<a href="#" data-toggle="tooltip" title="JQuery">JQuery</a>

	<div class="btn-group">
		<button class="btn btn-default btn-lg" data-toggle="tooltip" title="超文本标记语言">H</button>
		<button class="btn btn-default btn-lg" data-toggle="tooltip" title="超文本标记语言">T</button>
		<button class="btn btn-default btn-lg" data-toggle="tooltip" title="超文本标记语言">M</button>
		<button class="btn btn-default btn-lg" data-toggle="tooltip" title="超文本标记语言">L</button>
	</div>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		$('a').tooltip();
		
		// 延迟
  		/*$('[title=JQuery]').tooltip({ 				//也可以是[title="JQuery"]
  			delay : {
  				show : 1000,
  				hide : 1000
  			},
  			placement : 'auto left',
  			container : 'body'
  		})*/

  		//选择器
  		/*$('body').tooltip({ 							//是父级容器！！
  			selector : '[title=JQuery]'
  		})
  		$('[title=JQuery]').tooltip('show') 			//让提示框能正常消失*/

  		//容器
  		/*$('button').tooltip({
  			container : 'body'
  		})*/

  		//回调函数
  		/*$('a').on('show.bs.tooltip', function () {
			alert('显示前触发')
		})*/
	</script>
</body>
</html>